<!--
 * @Author: your name
 * @Date: 2020-06-15 09:32:03
 * @LastEditTime: 2020-06-15 16:48:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v1.0.0\components\kmlc-com\kmlc-form-sign\kmlc-form-sign.vue
--> 
<template>
  <view>
    <tui-list-cell :hover="false" :arrow="false">
      <view class="tui-line-cell">
        <view class="tui-title">
          <text v-show="rules_&&rules_[0]&&rules_[0].required&&!readonly_" class="isrequire">*</text>
          <text>{{label}}</text>
          <view @click="retDraw" class="tui-right" v-show="!readonly_&&retDrawIsShow">
            <uni-icons class type="refresh" color="#8f8f94" size="15" />
          </view>
        </view>

        <view class="imgbox">
          <view v-if="!readonly_" class="handCenter">
            <canvas
              class="handWriting"
              disable-scroll="true"
              @touchstart="uploadScaleStart"
              @touchmove="uploadScaleMove"
              @touchend="uploadScaleEnd"
              
              canvas-id="handWriting"
            ></canvas>
          </view>
          <view v-else>
            <image v-if="value" class="signImg" :lazy-load="true" :src="value"></image>
            <text v-else class="signImg" >暂无数据~！</text>
          </view>
        </view>
      </view>
    </tui-list-cell>
  </view>
</template>

<script>
import Handwriting from "@/common/framework/libs/signature.js";
export default {
  props: {
    label: {
      type: String
    },
    emData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rules: {
      type: Array,
      default: () => {
        return [];
      }
    },
    model: {
      type: String
    },
    keyStr: {
      type: String
    }
  },
  data() {
    return {
      handwriting: "",
      lineColor: "black",
      slideValue: 25,
      color: "",
      value: "",
      share_popup: false,
      retDrawIsShow: false,
      rules_: [],
      emData_: {}
    };
  },
  created() {
    this.initEmData();
  },
  mounted() {
    if(!this.readonly_){
      this.handwriting = new Handwriting({
        lineColor: this.lineColor,
        slideValue: this.slideValue, // 0, 25, 50, 75, 100
        canvasName: "handWriting"
      });
    }
  },
  watch:{
    'emData.options.defaultValue':function(val){
      console.log('watch data:',111);
      this.value =val||'';
      if(!val) this.retDraw();
    },
    emData(val){
      this.initemData();
    }
  },
  methods: {
    initEmData() {
      if (this.emData && this.emData.key) {
        this.emData_ = this.emData;
        this.emData_["options"]["options"] = this.personData;
        this.readonly_ = this.emData.options.readonly;
        this.rules_ = this.emData.rules;
        
      } else {
        this.emData_["options"] = this.options;
        this.emData_["rules"] = this.rules;
        this.emData_["model"] = this.model;
        this.emData_["key"] = this.keyStr;
        this.rules_ = this.rules;
      }
      this.value = this.emData_.options.defaultValue;
    },
    uploadScaleStart(event) {
      this.retDrawIsShow = true;
      this.handwriting.uploadScaleStart(event);
    },
    uploadScaleMove(event) {
      this.handwriting.uploadScaleMove(event);
    },
    uploadScaleEnd(event) {
      this.handwriting.uploadScaleEnd(event);
      this.subCanvas();
    },
    subCanvas() {
      let self =this;
      this.handwriting
        .saveCanvas()
        .then(res => {
          this.value = res;
          this.$emit('onChangeVal',res);
          // console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    retDraw() {
      this.retDrawIsShow = false;
      this.handwriting.retDraw();
      this.$emit('onChangeVal','');
    }
  },
  modal: {
    prop: "value",
    event: "onChangeVal"
  }
};
</script>

<style lang="scss">
.tui-line-cell {
  width: 100%;
  align-items: center;
  line-height: 32rpx;
}

.tui-title {
  line-height: 32rpx;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
   padding-bottom:20upx;
  .tui-right {
    margin-left: auto;
    font-size: 26upx;
    line-height: 1;
    color: #999;
    position: relative;
    top: -1px;
    left: -4px;
    transform: scale(1.5);
  }
}
.imgbox {
  width: 100%;
  .signImg {
    width: 690upx;
    display: block;
  }
}
.handWriting {
  background: #eee;
  width: 100%;
  height: 350upx;
}
.handCenter {
  width: 100%;
  border: 4upx dashed #e9e9e9;
  
}
.isrequire{ color:#d41200;}
</style>
